<template>
    <p><button @click="change">切换子组件</button></p>
    <component :is="currentCpm" />
</template>
<script setup lang="ts">
import { shallowRef } from 'vue'
import HtxUse4Component01 from './HtxUse4Component01.vue'
import HtxUse4Component02 from './HtxUse4Component02.vue'

// component组件的使用，子组件之间的切换[shallowRef]

let key = "1"
const currentCpm = shallowRef()

function change() {
    if (key === "1") {
        currentCpm.value = HtxUse4Component01
        key = "2"
    } else {
        currentCpm.value = HtxUse4Component02
        key = "1"
    }
}

</script>